<template>
	<!-- //微信小程序 ：style="[]" 要用数组的形式 -->
	<view class="custom-page-defalut">
		<view class="flex-column">
			<!-- 搜索+筛选 -->
				<view class="custom-search-area flex-row" >
				<view class="custom-search" style="width: 100%;" >
					<uni-search-bar v-model="requestParams.filter.key" placeholder="请输入搜索关键词" @clear="ClearSearch" @confirm="ConfirmSearch"></uni-search-bar>
				</view>
			</view>
			<view class="content flex-column"
				:style="[{'justify-content':!isSubmit&&list.length<=0?'center':'flex-start'}]">
				<view v-if="isSubmit&&list.length<=0">加载中...</view>
				<block v-if="list&&list.length>0">
					<!-- v-for="(item,idx) in list" :key="idx" @tap.stop="GoDetail(idx)" -->
					<view class="card flex-column"
						style="margin-top: 15rpx;width: 690rpx;height: auto;justify-content: center;"
						v-for="(item,idx) in list" :key="idx" @tap.stop="Submit(item)" >
						<block v-if="'Area' == selfmode">
							<view class="card-row" style="margin: 30rpx 0 ;" @tap.stop="Submit(item)">
								<view class="flex-row">
									<view class="singe-line" style="margin-right: 20rpx;width:320rpx">
										<text style="color:var(--uni-custom-label-color);margin-right: 10rpx;">{{fields[0].label}}:</text>{{deepGet(item,fields[0].field)||'无'}}
									</view>
									<view class="singe-line" style="max-width:250rpx;width: 320rpx;">
										<text style="color:var(--uni-custom-label-color);margin-right: 10rpx;">{{fields[1].label}}:</text>{{deepGet(item,fields[1].field)||'无'}}
									</view>
								</view>
								<!-- <view class="flex-row" style="justify-content: flex-end;width:210rpx">
										<view class="confirm-auto-button" style="margin-right: 20rpx;" @tap.stop="Submit(item)">选择</view>
																<image class="arrow-icon" src="@/static/icons/user/md-keyboard_arrow_right Copy@1x.png"></image>
									 </view> -->
							</view>
						</block>

						<block v-else-if="'LsMatrixS' ==selfmode||'Liale' == selfmode || 'Rummager' == selfmode">
							<view class="card-row" style="margin-bottom: 15rpx;">
								<view class="flex-row">
									<image src="../../static/icons/custom/u-s.png" class="row-icon"></image>{{deepGet(item,fields[2].field)||'无'}}
								</view>
								<!-- <view  class="confirm-auto-button" size="mini" type="primary" @tap.stop="GoDetail(item)">详情</view> -->
								<!-- <image class="arrow-icon" src="@/static/icons/user/md-keyboard_arrow_right Copy@1x.png">
								</image> -->
								<view></view>
							</view>

							<view class="card-row" style="margin-bottom: 15rpx;flex-wrap: wrap;">
								<view class="flex-row" style="width: 320rpx;" v-for="(i,idx) in fields">
									<!-- <text style="color:var(--uni-custom-label-color);">{{fields[0].label||''}}:</text> -->

										<view class="singe-line" style="margin-bottom: 15rpx;width:100%;-webkit-line-clamp:3">
												<text style="color:var(--uni-custom-label-color);margin-right: 10rpx;">{{i.label}}:</text>{{deepGet(item,i.field)||'无'}}
										</view>

								</view>
							</view>

					
						</block>
						
						<block v-else-if="'irregularity' == selfmode">
							<view class="card-row" style="margin-bottom: 15rpx;">
								<view class="flex-row">
									<image src="../../static/icons/custom/z-s.png" class="row-icon"></image>{{deepGet(item,fields[0].field)||'无'}}
								</view>
								<view>
									<view class="confirm-button" style="max-width:144rpx;min-width:144rpx;min-height:unset;line-height46rpx;margin: 0;height: 46rpx ;border-radius: 5px;" @tap.stop="GoDetail(item)">查看详情</view>
								</view>
							</view>
						
							<block v-if="iidx>0&&iidx<4" v-for="(i,iidx) in fields">
								<view class="card-row" style="margin-bottom: 15rpx;flex-wrap: wrap;">
									<view class="flex-row" style="width: 320rpx;" >
											<view class="singe-line" style="margin-bottom: 10rpx;width:100%;-webkit-line-clamp:3">
												<text style="color:var(--uni-custom-label-color);margin-right: 10rpx;">{{i.label}}:</text>{{deepGet(item,i.field)||'无'}}
											</view>	
									</view>
								</view>
							</block>
						
											
						</block>
						<block v-else-if="'LanDes' == selfmode">
							<view class="card-row" style="margin-bottom: 15rpx;">
								<view class="flex-row">
									<image src="../../static/icons/custom/no-s.png" class="row-icon">NO.{{(pageSet.currentPage - 1)*pageSet.pageSize+idx+1}}
								</view>
								<view></view>
							</view>
						
							<view class="card-row" style="margin-bottom: 30rpx;flex-wrap: wrap;">
								<view class="flex-row" style="width: 320rpx;" v-for="(i,idx) in fields">
										<view class="singe-line" style="margin-bottom: 15rpx;width:100%;-webkit-line-clamp:3">
											<text style="color:var(--uni-custom-label-color);margin-right: 10rpx;">{{i.label}}:</text>{{deepGet(item,i.field)||'无'}}
										</view>
						
								</view>
							</view>
						</block>
						<block v-else-if="'Plan' == selfmode">
							<view class="card-row" style="margin-bottom: 15rpx;">
								<view class="flex-row">
									<image src="../../static/icons/custom/no-s.png" class="row-icon">NO.{{(pageSet.currentPage - 1)*pageSet.pageSize+idx+1}}
								</view>
								<view></view>
							</view>
						
							<view class="card-row" style="margin-bottom: 15rpx;flex-wrap: wrap;">
								<view class="flex-row" style="width: 320rpx;" v-for="(i,idx) in fields">
										<view class="singe-line" style="width:100%;-webkit-line-clamp:3;margin-bottom: 15rpx;">
											<text style="color:var(--uni-custom-label-color);margin-right: 10rpx;">{{i.label}}:</text>{{deepGet(item,i.field)||'无'}}
										</view>
						
								</view>
							</view>
						</block>
						<block v-else>
							<view class="card-row" style="margin-bottom: 15rpx;">
								<view class="flex-row">
									<image src="../../static/icons/custom/no-s.png" class="row-icon">NO.{{(pageSet.currentPage - 1)*pageSet.pageSize+idx+1}}
								</view>
								<view>
									
								</view>
							</view>

							<view class="card-row" style="margin-bottom: 15rpx;flex-wrap: wrap;">
								<view class="flex-row" style="width: 320rpx;" v-for="(i,idx) in fields">
										<view class="singe-line" style="width:100%;-webkit-line-clamp:3;margin-bottom: 15rpx;">
											<text style="color:var(--uni-custom-label-color);margin-right: 10rpx;">{{i.label}}:</text>{{deepGet(item,i.field)||'无'}}
										</view>

								</view>
							</view>
						</block>

					</view>
					<!-- 	<uni-table border stripe emptyText="暂无更多数据" style="background-color: transparent;">
						<uni-tr>
							<uni-th width="150" align="center" v-for="(i,idx) in fields" :key="idx">{{i.label}}</uni-th>
							<uni-th width="90" align="center">操作</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in list" :key="index">
							<uni-td v-for="(i,idx) in fields" :key="idx">
								{{deepGet(item,i.field)||''}}
							</uni-td>
							<uni-td>
								<button size="mini" type="primary" @tap.stop="Submit(item)">选择</button>
							</uni-td>
						</uni-tr>
					</uni-table> -->
				</block>
				<!-- 没有数据 -->
				<uni-nodata v-if="netWorkState==1&&(!isSubmit)&&list&&list.length<=0"></uni-nodata>
				<!-- 网络异常重试 -->
				<block v-if="netWorkState==0">
					<view class="flex-column" style="min-height:588rpx ;justify-content: center;">
						<view>加载失败！请重试</view>
						<view class="confirm-button" style="width: 388rpx;min-width: 388rpx;" @tap.stop="GetList">重试
						</view>
					</view>
				</block>
			</view>

			<!-- //分页 -->
			<view style="width: 678rpx;" v-if="pageSet.totalPage>1">
				<uni-pagination :current="pageSet.currentPage" :page-size="pageSet.pageSize" :total="pageSet.total"
					@change="PaginationChange"></uni-pagination>
			</view>
		</view>
		<!-- //popup -->
		<view>
			<uni-popup ref="CustomPopup">
				<view class="custom-popup">
					<view class="custom-title">筛选</view>
					<view class="flex-row">
						<view class="custom-popup-radio">
						</view>
						<view class="custom-popup-radio">

						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import * as DictApis from '@/network/apis/dict.js';
	import * as PositionApis from '@/network/apis/position.js';
	import * as AccidentTypeApis from '@/network/apis/accidentType.js';
	import * as LecProApis from '@/network/apis/lecPro.js';
	import * as LecChanceApis from '@/network/apis/lecChance.js';
	import * as LecConseApis from '@/network/apis/lecConse.js';
	import * as LsMatrixSApis from '@/network/apis/lsMatrixS.js';
	import * as PlanApis from '@/network/apis/plan.js';
	import * as LatDictApis from '@/network/apis/latDict.js';
	import * as IrregularityApis from '@/network/apis/irregularity.js';
	import * as UserApis from '@/network/apis/user.js';
	import * as RepCateApis from '@/network/apis/repCate.js';
	import * as RepDevPerApis from '@/network/apis/repDevPer.js';
	import * as RepDeviceApis from '@/network/apis/repDevice.js';
	import * as RepPlanApis from '@/network/apis/repPlan.js';


	// 用法:{

	//  filter = 需要传入的参数
	//  ,selfmode =需要调用那个api的判断条件

	//  fields = [{label,field}]  = table 的表头和需要显示的字段名
	// 要求:数据格式相同
	// }
	export default {
		data() {
			return {
				isSubmit: false, //判断是否提交请求
				isTap: false, //判断是否点击
				netWorkState: 1, //0=false;1=true;
				//请求实体
				requestParams: {
					currentPage: 1,
					pageSize: 20,
					filter: {
						key:''
					},
					sort: null,
					order: null, //排序方向 ascending、descending
				},
				pageSet: {
					pageSize: 20,
					currentPage: 1,
					totalPage: 0,
					total: 0,
				},
				fields: [],
				list: [],
				selfmode: '',
				currentTask: null, //当前list请求实例
			}
		},
		onLoad({
			filter,
			selfmode,
			fields,
		}) {
			this.list = [];
			this.selfmode = selfmode;
			if (filter) {
				this.requestParams.filter = JSON.parse(decodeURIComponent(filter));
			}
			if (fields) {
				this.fields = JSON.parse(decodeURIComponent(fields));
			}
			this.GetList();

			console.log(this.fields)

		},
		onUnload() {
			this.list = [];
			this.fields = [];
			this.selfmode = '';
		},
		methods: {
			async GetList() {
				// if (this.isSubmit) return;
				this.isSubmit = true;
				console.log(this.currentTask)
				if (this.currentTask) this.currentTask.abort();
				let res;
				console.log(this.selfmode)
				if ('Area' == this.selfmode) { //获取区域
					res = await PositionApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('AccidentType' == this.selfmode) { //获取事故类型
					res = await AccidentTypeApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('LecPro' == this.selfmode) { //发生可能性
					res = await LecProApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('LecChance' == this.selfmode) { //暴露频繁程度
					res = await LecChanceApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('LecConse' == this.selfmode) { //后果可能性
					res = await LecConseApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('LsMatrixS' == this.selfmode) { //严重性
					res = await LsMatrixSApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('operUsers'==this.selfmode|| 'waterUser'== this.selfmode|| 'safeUser'==this.selfmode|| 'buildUser'==this.selfmode|| 'Liale' == this.selfmode || 'Rummager' == this.selfmode) { //选择用户
					res = await UserApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('Plan' == this.selfmode) { //选择隐患来源||隐患计划
					res = await PlanApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('LanDes' == this.selfmode) { //隐患描述
					res = await LatDictApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('irregularity' == this.selfmode) { //三危依据
					res = await IrregularityApis.getlist(this.requestParams, (task) => this.currentTask = task);

				} else if ('repCate' == this.selfmode) { //设备分类
					res = await RepCateApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('repDevPer' == this.selfmode) { //检修周期
					res = await RepDevPerApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('repDevice' == this.selfmode) { //检修设备
					res = await RepDeviceApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else if ('repPlan' == this.selfmode) { //检修计划
					res = await RepPlanApis.getlist(this.requestParams, (task) => this.currentTask = task);
				} else { //字典
					res = await DictApis.getlist(this.requestParams, (task) => this.currentTask = task);
				}
				if (res && res.success) {
					this.netWorkState = 1;
					if (res.data) {
						this.requestParams.currentPage = res.data.currentPage;
						this.pageSet.currentPage = res.data.currentPage;
						this.pageSet.pageSize = res.data.pageSize;
						this.pageSet.total = res.data.total;
						this.pageSet.totalPage = res.data.totalPage;
						//
						this.list = res.data.list;
					}
				} else {
					if (res == false) {
						this.netWorkState = 0;
						this.list = [];
					}

					if (res && res.message) {
						uni.showToast({
							icon: 'none',
							title: res.message
						});
					}

				}
				this.isSubmit = false;
			},
			//e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
			PaginationChange(event) {
				if (event) {
					let {
						type,
						current
					} = event;
					if ('next' == type) {
						if (this.pageSet.totalPage > this.requestParams.currentPage) {
							this.requestParams.currentPage += 1;
							this.GetList();
						}
					} else if ('prev') {
						if (this.requestParams.currentPage > 1) {
							this.requestParams.currentPage -= 1;
							this.GetList();
						}
					}
				}
			},
			ConfirmSearch() {
				if ('' == this.requestParams.filter.key) {
					uni.showToast({
						icon: "none",
						title: '请填写搜索内容'
					})
					return;
				}
				console.log(this.requestParams.filter.key)
				this.GetList();
			},
			ClearSearch() {
				this.ResetPageSet();
				this.GetList();
			},
			ResetPageSet() {
				this.requestParams.currentPage = 1;
				this.requestParams.filter.key = '';
			},
			ShowFliterPanel() {
				this.$refs['CustomPopup'].open('bottom');
			},
			deepGet(obj, keys, defaultVal) {
				return (
					(!Array.isArray(keys) ?
						keys.replace(/\[/g, '.').replace(/\]/g, '').split('.') :
						keys
					).reduce((o, k) => (o || {})[k], obj) || defaultVal
				);
			},
			Submit(value) {
				value.selfmode = this.selfmode;
				uni.$emit('tableSelector', value);
				uni.navigateBack();
			},
			GoDetail(item) {
				let obj = {
					fields: this.fields,
					data: item
				};
				uni.navigateTo({
					url: '/pageUtils/selector/detail?payload=' + encodeURIComponent(JSON.stringify(obj))
				})
			}

		}
	}
</script>

<style scoped>
	@import url('@/styles/layout/search.css');
	@import url('@/styles/layout/popup.css');

	.content {
		min-width: 678rpx;
		width: 678rpx;
		min-height: 688rpx;
		box-sizing: border-box;
		height: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		color: var(--uni-custom-color);
	}

	/deep/.uni-table {
		background-color: transparent;
	}

	/deep/.uni-table-td {
		color: unset;
	}

	/deep/.uni-table-tr {
		color: unset;
	}

	.arrow-icon {
		width: 38rpx;
		height: 38rpx;
		flex-grow: 0;
		flex-shrink: 0;
	}
</style>